<template>
  <view class="container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-section">
        <text class="filter-label">直播状态</text>
        <scroll-view scroll-x="true" class="status-scroll">
          <view 
            v-for="(status, index) in liveStatuses" 
            :key="index" 
            class="status-item"
            :class="{ 'active': selectedStatus === status.value }"
            @click="filterByStatus(status.value)"
          >
            <text>{{ status.label }}</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 直播列表 -->
    <view class="live-list">
      <view 
        v-for="(item, index) in filteredLives" 
        :key="item.id" 
        class="live-item"
        @click="goToLiveDetail(item)"
      >
        <view class="item-thumb">
          <image :src="item.thumbnail" mode="aspectFill" class="thumb-img" />
          <view class="status-badge" :class="getStatusClass(item.status)">{{ item.status }}</view>
        </view>
        <view class="item-content">
          <text class="item-title">{{ item.caseName }}</text>
          <text class="item-court">审理法院: {{ item.court }}</text>
          <text class="item-time">开庭时间: {{ item.startTime }}</text>
          <text class="item-judge">审判长: {{ item.judge }}</text>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="filteredLives.length === 0" class="no-result">
      <text>暂无 {{ selectedStatus === 'all' ? '' : liveStatuses.find(s => s.value === selectedStatus)?.label }} 的庭审直播</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedStatus: 'all', // 当前选中的状态
      liveStatuses: [
        { label: '全部', value: 'all' },
        { label: '直播中', value: 'live' },
        { label: '预告', value: 'upcoming' },
        { label: '已结束', value: 'ended' },
      ],
      // 模拟直播数据（实际项目应从后端获取）
      lives: [
        {
          id: 1,
          caseName: '张三诉李四合同纠纷案',
          court: '北京市朝阳区人民法院',
          judge: '王法官',
          startTime: '2025-04-20 14:00',
          status: 'live',
          thumbnail: '/static/live_thumb_1.jpg', // 假设路径
          streamUrl: 'https://example.com/live/stream1.m3u8', // 假设流地址
        },
        {
          id: 2,
          caseName: '王五涉嫌盗窃案',
          court: '上海市浦东新区人民法院',
          judge: '赵法官',
          startTime: '2025-04-21 10:00',
          status: 'upcoming',
          thumbnail: '/static/live_thumb_2.jpg',
          streamUrl: 'https://example.com/live/stream2.m3u8',
        },
        {
          id: 3,
          caseName: '某公司诉某局行政许可案',
          court: '广州市天河区人民法院',
          judge: '孙法官',
          startTime: '2025-04-18 15:30',
          status: 'ended',
          thumbnail: '/static/live_thumb_3.jpg',
          streamUrl: 'https://example.com/live/stream3.m3u8',
        },
        {
          id: 4,
          caseName: '赵六诉钱七离婚纠纷案',
          court: '深圳市南山区人民法院',
          judge: '周法官',
          startTime: '2025-04-22 09:30',
          status: 'upcoming',
          thumbnail: '/static/live_thumb_4.jpg',
          streamUrl: 'https://example.com/live/stream4.m3u8',
        },
        {
          id: 5,
          caseName: '某企业诉某政府部门案',
          court: '杭州市西湖区人民法院',
          judge: '吴法官',
          startTime: '2025-04-19 16:00',
          status: 'ended',
          thumbnail: '/static/live_thumb_5.jpg',
          streamUrl: 'https://example.com/live/stream5.m3u8',
        },
      ]
    };
  },
  computed: {
    filteredLives() {
      if (this.selectedStatus === 'all') {
        return this.lives;
      }
      return this.lives.filter(live => live.status === this.selectedStatus);
    }
  },
  methods: {
    filterByStatus(status) {
      this.selectedStatus = status;
    },
    goToLiveDetail(live) {
      // 跳转到直播详情页，传入直播ID或URL
      uni.navigateTo({
        url: `/pages/trial-live-detail/trial-live-detail?id=${live.id}&url=${encodeURIComponent(live.streamUrl)}`
      });
    },
    getStatusClass(status) {
      switch (status) {
        case 'live': return 'live';
        case 'upcoming': return 'upcoming';
        case 'ended': return 'ended';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.filter-bar {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.filter-section {
  display: flex;
  flex-direction: column;
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.status-scroll {
  white-space: nowrap;
}

.status-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.status-item.active {
  background-color: #007aff;
  color: white;
}

.live-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.live-item {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
}

.live-item:last-child {
  border-bottom: none;
}

.item-thumb {
  position: relative;
  width: 200rpx;
  height: 150rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.thumb-img {
  width: 100%;
  height: 100%;
}

.status-badge {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: white;
}

.status-badge.live {
  background-color: #f44336;
}

.status-badge.upcoming {
  background-color: #ff9800;
}

.status-badge.ended {
  background-color: #9e9e9e;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.item-court, .item-time, .item-judge {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>